<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>长方形-自制函数</title>
</head>
<body>

<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;">
	当前浏览器不支持canvas, 请更换浏览器后再试
</canvas>
<script>
	window.onload = function(){
		var canvas = document.getElementById("canvas");
		
		canvas.width = 800;
		canvas.height = 800;
		
		var context = canvas.getContext("2d");
		
		drawRect( context, 100, 100, 400, 400, 10, "#058", "red");	
		triangle( context, 300, 300, 400, 400, 10, "#058", "red");	

	}
	
	/**长方形
	 * 
	 **/
	function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
		
		cxt.beginPath();
		cxt.moveTo( x, y);
		cxt.lineTo( x + width , y);
		cxt.lineTo( x + width, y + height);
		cxt.lineTo( x, y + height);
		cxt.closePath();
		
		cxt.lineWidth = borderWidth;
		cxt.fillStyle = fillColor;
		cxt.strokeStyle = borderColor;
		
		cxt.fill();
		cxt.stroke();
		
		}
		
   	function triangle(cxt, x, y, width, height, borderWidth, borderColor, fillColor){
		cxt.beginPath();
		cxt.moveTo( x, y);
		cxt.lineTo( x + width , y);
		cxt.lineTo( x + width, y + height);
		cxt.closePath();
		
		cxt.lineWidth = borderWidth;
		cxt.fillStyle = fillColor;
		cxt.strokeStyle = borderColor;
		
		cxt.fill();
		cxt.stroke();
	}
	
</script>
</body>
</html>
